<template>
  <div class="sort">
    <header>
      <van-nav-bar title="分类" left-text="返回" left-arrow  @click-left="onClickLeft">
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </header>
    <section>
      <van-tree-select
        height="55vw"
        :items="items"
        :main-active-index.sync="active"
      >
        <template #content>
          <ul v-if="active === 0">
            <li v-for="item in phone" :key="item.number" @click="Gogoods(item.number)">
                <div class="img">
                    <img :src="item.images" alt="">
                </div>
                <div class="name">
                    <span>{{item.name}}</span>
                </div>
            </li>
          </ul>
          <ul v-if="active === 1">
            <li v-for="item in computer" :key="item.number" @click="Gogoods(item.number)">
                <div class="img">
                    <img :src="item.images" alt="">
                </div>
                <div class="name">
                    <span>{{item.name}}</span>
                </div>
            </li>
          </ul>
          <ul v-if="active === 2">
            <li v-for="value in 4" :key="value">
                <div class="img">
                    <img src="	http://demo.demohuo.top/modals/67/6714/demo/img/tp.png" alt="">
                </div>
                <div class="name">
                    <span>手表</span>
                </div>
            </li>
          </ul>
          <ul v-if="active === 3">
            <li v-for="value in 8" :key="value">
                <div class="img">
                    <img src="	http://demo.demohuo.top/modals/67/6714/demo/img/tp.png" alt="">
                </div>
                <div class="name">
                    <span>平板</span>
                </div>
            </li>
          </ul>
        </template>
      </van-tree-select>
    </section>
  </div>
</template>
<script>
import {Toast} from 'vant';
import {getAboutList} from '@/http/api'
export default {
  data() {
    return {
      active: 0,
      items: [
        { text: "手机" },
        { text: "电视" },
        { text: "手表" },
        { text: "平板" },
      ],
      phone:[],
      computer:[],
    };
  },
  methods: {
    onClickLeft() {
      Toast("返回");
      this.$router.push({ path: "/m" }); 
    },
    onClickRight() {
      Toast("按钮");
    },
    //渲染数据
    atuoplay(){
      let that = this;
       getAboutList('/about/alldata').then(data=>{
        if(data.code==200){
          // console.log(data.rows[0]);
          that.phone= JSON.parse(data.rows[0].phone)
          that.computer= JSON.parse(data.rows[0].telly)
        }
       })
    },
    //跳转到对应商品界面
    Gogoods(val) {
      // this.$router.push({ name: "goods", params: { number: val }})
      this.$router.push({ path: '/goods', query: { number: val }})
    },

  },
  created(){
    this.atuoplay()
  }
};
</script>
<style lang="scss">
@import "@/static/css/base.scss";
@import "@/static/componentscss/sort.scss";
</style>